<!doctype html>
<html lang="en">

<head>

    <!-- Basic Page Needs
    ================================================== -->
    <title>真选收藏夹</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Simplest is - Professional A unique and beautiful collection of UI elements">
    <link rel="icon" href="assets/images/favicon.png">

    <!-- CSS 
    ================================================== -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/uikit.css">
    <link rel="stylesheet" href="../plugin/layui/css/layui.css">
    <link rel="stylesheet" href="assets/css/pages.css">
    <!-- icons
    ================================================== -->
    <link rel="stylesheet" href="assets/css/icons.css">


</head>

<body>


<!-- Wrapper -->
<div id="wrapper">

    <!-- sidebar -->
    <div class="main_sidebar">
        <div class="side-overlay" uk-toggle="target: #wrapper ; cls: collapse-sidebar mobile-visible"></div>

        <!-- sidebar header -->
        <div class="sidebar-header">
            <!-- Logo-->
            <div id="logo">
                <a href="javascript:void(0)"> <img src="assets/images/logo-light.png" alt=""></a>
            </div>
            <span class="btn-close" uk-toggle="target: #wrapper ; cls: collapse-sidebar mobile-visible"></span>
        </div>

        <!-- sidebar Menu -->
        <div class="sidebar">
            <div class="sidebar_innr" data-simplebar>

                <div class="sections">
                    <h3> 我的收藏夹 </h3>
                    <ul v-if="boxes!=null">
                        <li @click="switchBox(item.id)" :class="[item.id==currentBox.id?'active':'']" v-for="item in boxes">
                            <a>
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                    <path fill="#03A9F4" d="M5 3A2 2 0 0 0 3 5H5M7 3V5H9V3M11 3V5H13V3M15 3V5H17V3M19 3V5H21A2 2 0 0 0 19 3M3 7V9H5V7M7 7V11H11V7M13 7V11H17V7M19 7V9H21V7M3 11V13H5V11M19 11V13H21V11M7 13V17H11V13M13 13V17H17V13M3 15V17H5V15M19 15V17H21V15M3 19A2 2 0 0 0 5 21V19M7 19V21H9V19M11 19V21H13V19M15 19V21H17V19M19 19V21A2 2 0 0 0 21 19Z">
                                    </path>
                                </svg>
                                {{item.boxName}}
                            </a>
                        </li>
                    </ul>

                </div>

                <!--  Optional Footer -->
                <div id="foot">

                    <ul>
                        <li><a href="page-term.html"> About Us </a></li>
                        <li><a href="page-setting.html"> Setting </a></li>
                        <li><a href="page-privacy.html"> Privacy Policy </a></li>
                        <li><a href="page-term.html"> Terms - Conditions </a></li>
                    </ul>


                    <div class="foot-content">
                        <p>© 2020 <strong>Simplest</strong>. All Rights Reserved. </p>
                    </div>

                </div>


            </div>


        </div>

    </div>

    <!-- contents -->
    <div class="main_content">

        <!-- header -->
        <div id="main_header">
            <header>
                <div class="header-innr">

                    <!-- Logo-->
                    <div class="header-btn-traiger is-hidden"
                         uk-toggle="target: #wrapper ; cls: collapse-sidebar mobile-visible">
                        <span></span></div>

                    <!-- Logo-->
                    <div id="logo">
                        <a href="javascript:void(0)"> <img src="assets/images/logo.png" alt=""></a>
                        <a href="javascript:void(0)"> <img src="assets/images/logo-light.png" class="logo-inverse"
                                                   alt=""></a>
                    </div>

                    <!-- form search-->
                    <div class="head_search">
                        <form>
                            <div class="head_search_cont">
                                <input value="" type="text" class="form-control"
                                       placeholder="" autocomplete="off">
                                <i class="s_icon uil-search-alt"></i>
                            </div>

                            <!-- Search box dropdown -->
                            <div uk-dropdown="pos: top;mode:click;animation: uk-animation-slide-bottom-small"
                                 class="dropdown-search display-hidden">


                            </div>


                        </form>
                    </div>

                    <!-- user icons -->
                    <div class="head_user">


                        <!-- browse apps  -->
                        <a href="#" class="opts_icon uk-visible@s" uk-tooltip="title: 展示模式 ; pos: bottom ;offset:7">
                            <img src="assets/images/icons/apps.svg" alt="">
                        </a>


                        <!-- Message  notificiation dropdown -->
                        <a href="#" class="opts_icon" uk-tooltip="title: 消息 ; pos: bottom ;offset:7">
                            <img src="assets/images/icons/chat.svg" alt="">
                            <!-- <span>4</span> -->
                        </a>

                        <!-- notificiation icon  -->
                        <a href="#" class="opts_icon" uk-tooltip="title: 提示 ; pos: bottom ;offset:7">
                            <img src="assets/images/icons/bell.svg" alt="">
                            <!-- <span>3</span> -->
                        </a>
                        <!-- profile -image -->
                        <a class="opts_account" href="#">
                            <a href="../login.html" onclick="return userClick()" class="layui-icon layui-icon-friends" style="font-weight: bold;font-size: 24px;color: #1c3faa;"></a>
<!--                            <img src="assets/images/avatars/avatar-2.jpg" alt="">-->
                        </a>

                        <!-- profile dropdown-->
                        <div uk-dropdown="mode:click ; animation: uk-animation-slide-bottom-small"
                             class="dropdown-notifications rounded display-hidden">

                            <!-- User Name / Avatar -->
                            <!-- User Name / Avatar -->
                            <a>

                                <div class="dropdown-user-details">

                                    <div class="dropdown-user-cover">
                                        <img src="assets/images/avatars/profile-cover.jpg" alt="">
                                    </div>
                                    <div class="dropdown-user-avatar">
                                        <img src="assets/images/avatars/avatar-1.jpg" alt="">
                                    </div>
                                    <div class="dropdown-user-name"> James Lewis</div>
                                </div>

                            </a>

                            <ul class="dropdown-user-menu">

                                <li>
                                    <a href="/user/signOut"> <i class="fas fa-sign-out-alt"></i>退出登录</a>
                                </li>
                            </ul>
                        </div>


                    </div>

                </div> <!-- / heaader-innr -->
            </header>

        </div>

        <div class="main_content_inner">


            <h1 class="mb-1" v-if="currentBox!=null"> {{currentBox.boxName}} </h1>
            <div class="uk-flex uk-flex-between uk-flex-middle mb-4">

                <a id="add-favorite" class="button primary small circle uk-visible@s"> <i class="uil-plus"> </i>
                    创建新的收藏
                </a>

            </div>


            <!-- pages list  -->

            <div v-if="websites!=null" class="uk-child-width-1-5@m uk-child-width-1-3@s uk-child-width-1-2 uk-grid-small" uk-grid>
                <div v-for="item in websites" :title="item.name">
                    <div class="sl_page_list boosted_pages">

                        <a target="_blank" :href="item.url">
                            <div class="sl_page_list_media">
                                <img :src="item.img" onerror="this.src= '../img/null.png';" alt="Picture">
                            </div>
                        </a>

                        <div class="sl_page_list_info">
                            <h3><a target="_blank" :href="item.href">{{item.name}}</a></h3>
<!--                            <span>  Education </span>-->
<!--                            <p> 5 people like this </p>-->
                            <div class="sl_page_list_info_btns">
                                        <span style="padding-right: 7px;">
                                        <button @click="deleteFavorite(item.id)" type="button" class="button primary small block">
                                            <span> 删除</span>
                                        </button>
                                        </span>
                                        <span  style="padding-left: 7px;">
                                        <button @click="getOne(item.id)" type="button" class="button danger small block">
                                            <span> 编辑</span>
                                        </button>
                                        </span>
                            </div>

                        </div>

                    </div>

                </div>
<!--                <div>-->

<!--                    <div class="sl_page_list boosted_pages">-->

<!--                        <a href="group-feed.html">-->
<!--                            <div class="sl_page_list_media">-->
<!--                                <img src="assets/images/avatars/avatar-6.jpg" alt="Picture">-->
<!--                            </div>-->
<!--                        </a>-->

<!--                        <div class="sl_page_list_info">-->
<!--                            <h3><a href="group-feed.html"> Reveal Store </a></h3>-->
<!--                            <span> Marketplace </span>-->
<!--                            <p> 14 people like this </p>-->
<!--                            <div class="sl_page_list_info_btns">-->
<!--                                        <span>-->
<!--                                        <button type="button" class="button primary small block">-->
<!--                                            <span> like</span>-->
<!--                                        </button>-->
<!--                                        </span>-->
<!--                            </div>-->

<!--                        </div>-->

<!--                    </div>-->

<!--                </div>-->
<!--                <div>-->

<!--                    <div class="sl_page_list boosted_pages">-->

<!--                        <a href="group-feed.html">-->
<!--                            <div class="sl_page_list_media">-->
<!--                                <img src="assets/images/avatars/avatar-7.jpg" alt="Picture">-->
<!--                            </div>-->
<!--                        </a>-->

<!--                        <div class="sl_page_list_info">-->
<!--                            <h3><a href="group-feed.html">Suranna Brand </a></h3>-->
<!--                            <span>  Education </span>-->
<!--                            <p> 5 people like this </p>-->
<!--                            <div class="sl_page_list_info_btns">-->
<!--                                        <span>-->
<!--                                        <button type="button" class="button primary small block">-->
<!--                                            <span> like</span>-->
<!--                                        </button>-->
<!--                                        </span>-->
<!--                            </div>-->

<!--                        </div>-->

<!--                    </div>-->

<!--                </div>-->
<!--                <div>-->

<!--                    <div class="sl_page_list boosted_pages">-->

<!--                        <a href="group-feed.html">-->
<!--                            <div class="sl_page_list_media">-->
<!--                                <img src="assets/images/avatars/avatar-lg-2.jpg" alt="Picture">-->
<!--                            </div>-->
<!--                        </a>-->

<!--                        <div class="sl_page_list_info">-->
<!--                            <h3><a href="group-feed.html"> Sky Accounting </a></h3>-->
<!--                            <span>  Business </span>-->
<!--                            <p> 13 people like this </p>-->
<!--                            <div class="sl_page_list_info_btns">-->
<!--                                        <span>-->
<!--                                        <button type="button" class="button primary small block">-->
<!--                                            <span> like</span>-->
<!--                                        </button>-->
<!--                                        </span>-->
<!--                            </div>-->

<!--                        </div>-->

<!--                    </div>-->

<!--                </div>-->
<!--                <div>-->

<!--                    <div class="sl_page_list boosted_pages">-->

<!--                        <a href="group-feed.html">-->
<!--                            <div class="sl_page_list_media">-->
<!--                                <img src="assets/images/avatars/avatar-lg-2.jpg" alt="Picture">-->
<!--                            </div>-->
<!--                        </a>-->

<!--                        <div class="sl_page_list_info">-->
<!--                            <h3><a href="group-feed.html"> Sky Accounting </a></h3>-->
<!--                            <span>  Business </span>-->
<!--                            <p> 13 people like this </p>-->
<!--                            <div class="sl_page_list_info_btns">-->
<!--                                        <span>-->
<!--                                        <button type="button" class="button primary small block">-->
<!--                                            <span> like</span>-->
<!--                                        </button>-->
<!--                                        </span>-->
<!--                            </div>-->

<!--                        </div>-->

<!--                    </div>-->

<!--                </div>-->
<!--                <div>-->

<!--                    <div class="sl_page_list boosted_pages">-->

<!--                        <a href="group-feed.html">-->
<!--                            <div class="sl_page_list_media">-->
<!--                                <img src="assets/images/avatars/avatar-lg-5.jpg" alt="Picture">-->
<!--                            </div>-->
<!--                        </a>-->

<!--                        <div class="sl_page_list_info">-->
<!--                            <h3><a href="group-feed.html"> Phase Designers </a></h3>-->
<!--                            <span>  Shopping </span>-->
<!--                            <p> 15 people like this </p>-->
<!--                            <div class="sl_page_list_info_btns">-->
<!--                                        <span>-->
<!--                                        <button type="button" class="button primary small block">-->
<!--                                            <span> like</span>-->
<!--                                        </button>-->
<!--                                        </span>-->
<!--                            </div>-->

<!--                        </div>-->

<!--                    </div>-->

<!--                </div>-->
<!--                <div>-->

<!--                    <div class="sl_page_list boosted_pages">-->

<!--                        <a href="group-feed.html">-->
<!--                            <div class="sl_page_list_media">-->
<!--                                <img src="assets/images/avatars/avatar-lg-3.jpg" alt="Picture">-->
<!--                            </div>-->
<!--                        </a>-->

<!--                        <div class="sl_page_list_info">-->
<!--                            <h3><a href="group-feed.html"> Reveal Store </a></h3>-->
<!--                            <span> Marketplace </span>-->
<!--                            <p> 14 people like this </p>-->
<!--                            <div class="sl_page_list_info_btns">-->
<!--                                        <span>-->
<!--                                        <button type="button" class="button primary small block">-->
<!--                                            <span> like</span>-->
<!--                                        </button>-->
<!--                                        </span>-->
<!--                            </div>-->

<!--                        </div>-->

<!--                    </div>-->

<!--                </div>-->
<!--                <div>-->

<!--                    <div class="sl_page_list boosted_pages">-->

<!--                        <a href="group-feed.html">-->
<!--                            <div class="sl_page_list_media">-->
<!--                                <img src="assets/images/avatars/avatar-1.jpg" alt="Picture">-->
<!--                            </div>-->
<!--                        </a>-->

<!--                        <div class="sl_page_list_info">-->
<!--                            <h3><a href="group-feed.html"> Phase Designers </a></h3>-->
<!--                            <span>  Shopping </span>-->
<!--                            <p> 15 people like this </p>-->
<!--                            <div class="sl_page_list_info_btns">-->
<!--                                        <span>-->
<!--                                        <button type="button" class="button primary small block">-->
<!--                                            <span> like</span>-->
<!--                                        </button>-->
<!--                                        </span>-->
<!--                            </div>-->

<!--                        </div>-->

<!--                    </div>-->

<!--                </div>-->
<!--                <div>-->

<!--                    <div class="sl_page_list boosted_pages">-->

<!--                        <a href="group-feed.html">-->
<!--                            <div class="sl_page_list_media">-->
<!--                                <img src="assets/images/avatars/avatar-6.jpg" alt="Picture">-->
<!--                            </div>-->
<!--                        </a>-->

<!--                        <div class="sl_page_list_info">-->
<!--                            <h3><a href="group-feed.html"> Reveal Store </a></h3>-->
<!--                            <span> Marketplace </span>-->
<!--                            <p> 14 people like this </p>-->
<!--                            <div class="sl_page_list_info_btns">-->
<!--                                        <span>-->
<!--                                        <button type="button" class="button primary small block">-->
<!--                                            <span> like</span>-->
<!--                                        </button>-->
<!--                                        </span>-->
<!--                            </div>-->

<!--                        </div>-->

<!--                    </div>-->

<!--                </div>-->
<!--                <div>-->

<!--                    <div class="sl_page_list boosted_pages">-->

<!--                        <a href="group-feed.html">-->
<!--                            <div class="sl_page_list_media">-->
<!--                                <img src="assets/images/avatars/avatar-lg-4.jpg" alt="Picture">-->
<!--                            </div>-->
<!--                        </a>-->

<!--                        <div class="sl_page_list_info">-->
<!--                            <h3><a href="group-feed.html">Suranna Brand </a></h3>-->
<!--                            <span>  Education </span>-->
<!--                            <p> 5 people like this </p>-->
<!--                            <div class="sl_page_list_info_btns">-->
<!--                                        <span>-->
<!--                                        <button type="button" class="button primary small block">-->
<!--                                            <span> like</span>-->
<!--                                        </button>-->
<!--                                        </span>-->
<!--                            </div>-->

<!--                        </div>-->

<!--                    </div>-->

<!--                </div>-->
            </div>
            <div class="load-more">
                <button class="btn button">加载更多</button>
            </div>

        </div>

    </div>
</div>
<!--新增收藏的遮罩-->
<div id="siteSetBlackBg">
    <div id="newSiteSetBox" style="margin-top: -150px;">

        <div class="newSiteSetListBox" style="margin-top:30px; ">
            <div class="nssBoxName">网址</div>
            <input id="nssUrlInput" maxlength="3000" type="text" placeholder="输入或粘贴网址Url" name="">
        </div>

        <div class="newSiteSetListBox">
            <div class="nssBoxName">名称</div>
            <input id="nssNameInput" maxlength="20" type="text" placeholder="输入网站名称(空自动识别)" name="">
        </div>
        <div class="newSiteSetListBox">
            <div class="nssBoxName">图片</div>
            <input id="imgInput" type="text" placeholder="输入图片地址(空自动识别)" name="">
        </div>
        <div id="nssConfirmBox">
            <div id="nssCancel">取消</div>
            <div id="nssConfirm">确认</div>
        </div>
    </div>
</div>

<!-- javaScripts
================================================== -->
<script src="assets/js/uikit.js"></script>
<script src="assets/js/simplebar.js"></script>
<script src="../plugin/jquery/jquery-3.3.1.min.js"></script>
<script src="../plugin/util.js"></script>
<script src="../plugin/vuejs-2.5.16.js"></script>
<script src="../plugin/axios-0.18.0.js"></script>
<script>
    let layer = null;
    //启用layer
    layui.use('layer', function(){
        layer = layui.layer;
    });
</script>
<script src="../plugin/vue/show-info.js"></script>
<script src="../plugin/layui/layui.js"></script>
<script>
function userClick(){
    let isLogin = $(".dropdown-user-name").data("isLogin")===true;
    if (!isLogin){
        location.href = "../login.html";
    }
    return !isLogin;
}
$(function () {

    //确定按钮，持久化到数据库
    $("#nssConfirm").data("type","insert");
    $("#nssConfirm").click(function () {
        if ($(this).data("type")==="insert") {
            showInfo.addBookmark();
        }else{
            showInfo.updateFavorite();
        }
    })

    //点击添加按钮
    $("#add-favorite").click(function () {
        $("#siteSetBlackBg").css("display","block");
        $("#newSiteSetBox").fadeIn(300);
    })

    //取消按钮
    $("#nssCancel").click(function () {
        //清空输入框
        $("#nssNameInput").val("");
        $("#imgInput").val("");
        $("#nssUrlInput").val("");
        //改为新增
        $("#nssConfirm").data("type","insert");
        $("#siteSetBlackBg").fadeOut(300,function () {
            $("#newSiteSetBox").css("display","none");
        });
    })

    //获得登录的用户
    $(".dropdown-user-name").data("isLogin",false)
    $.get("/user/getLoginUser", function (data) {
        //已经登录了
        if (data != null && !$.emptyString(data)) {
            $(".dropdown-user-name").text(data.name)
            $(".dropdown-user-name").data("isLogin",true);
        }
    })


})
</script>

</body>

</html>